import * as THREE from "three";

class MyFlyLine {

    constructor(source,target,height) {
        this.height = height ;
        this.source = source ;
        this.target = target ;
        this.circleYs = []   ;
        this.moveSpots = [] ;
        this.group = new THREE.Group();
        this.init();
    }

    init(){
        // 使用QuadraticBezierCurve3() 创建 三维二次贝塞尔曲线
        var source = new THREE.Vector3(this.source.x,this.source.y,this.source.z) ;
        var target = new THREE.Vector3(this.target.x,this.target.y,this.target.z) ;
        var center = source.clone().lerp(target,0.5);
        center.setY(this.height);
        const curve = new THREE.QuadraticBezierCurve3(source,center,target)


        // 绘制 目标位置
        this.spotCircle(this.source)
        this.spotCircle(this.target)
        this.moveSpot(curve)

        const lineGeometry = new THREE.BufferGeometry()
        // 获取曲线 上的50个点
        var points = curve.getPoints(50)
        var positions = []
        var colors = []
        var color = new THREE.Color()

        // 给每个顶点设置演示 实现渐变
        for (var j = 0; j < points.length; j++) {
            color.setHSL(0.81666 + j, 0.88, 0.715 + j * 0.0025) // 粉色
            colors.push(color.r, color.g, color.b)
            positions.push(points[j].x, points[j].y, points[j].z)
        }
        // 放入顶点 和 设置顶点颜色
        lineGeometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3, true))
        lineGeometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3, true))

        const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors, side: THREE.DoubleSide })
        const line = new THREE.Line(lineGeometry, material)
        this.group.add(line);
    }

    spotCircle(spot) {
        // 圆
        const geometry1 = new THREE.CircleGeometry(0.5, 200)
        const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide })
        const circle = new THREE.Mesh(geometry1, material1)
        // 绘制地图时 y轴取反 这里同步
        circle.position.set(spot.x,spot.y, spot.z)
        circle.rotateX(Math.PI * 0.5)
        this.group.add(circle)

        // 圆环
        const geometry2 = new THREE.RingGeometry(0.5, 0.7, 50)
        // transparent 设置 true 开启透明
        const material2 = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, transparent: true })
        const circleY = new THREE.Mesh(geometry2, material2)
        // 绘制地图时 y轴取反 这里同步
        circleY.position.set(spot.x, spot.y, spot.z)
        circleY.rotateX(Math.PI * 0.5)
        this.group.add(circleY)
        this.circleYs.push(circleY)
    }

    moveSpot(curve) {
        // 线上的移动物体
        const aGeo = new THREE.SphereGeometry(0.4, 0.4, 0.4)
        const aMater = new THREE.MeshPhongMaterial({ color: 0xff0000, side: THREE.DoubleSide })
        const aMesh = new THREE.Mesh(aGeo, aMater)
        // 保存曲线实例
        aMesh.curve = curve
        aMesh._s = 0

        this.moveSpots.push(aMesh)
        this.group.add(aMesh)
    }
    // 播放动画方法
     playAnimation(){
        this.moveSpots.forEach((mesh)=>{
            mesh._s += 0.006
            let tankPosition = new THREE.Vector3()
            tankPosition = mesh.curve.getPointAt(mesh._s % 1)
            mesh.position.set(tankPosition.x, tankPosition.y, tankPosition.z)
        })

        this.circleYs.forEach( (mesh)=>{
            //  目标 圆环放大 并 透明
            mesh._s += 0.01
            mesh.scale.set(1 * mesh._s, 1 * mesh._s, 1 * mesh._s)
            if (mesh._s <= 2) {
                mesh.material.opacity = 2 - mesh._s
            } else {
                mesh._s = 1
            }
        })
    }


}

export default MyFlyLine